<template>
  <div class="op-dialog">
    <el-dialog v-model="visible" :title="title" width="800">
      <template #default>
        <el-form ref="formRef" :model="model" :rules="rules" label-width="100">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="头像" prop="headImg">
                <AvatarUpload v-model="model.headImg" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="model.name" />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="昵称" prop="nickName">
                <el-input v-model="model.nickName" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="model.username" />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="密码" prop="password">
                <el-input v-model="model.password" type="password" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="角色" prop="roleIdList">
                <RoleSelect v-model="model.roleIdList" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="手机号码" prop="phone">
                <el-input v-model="model.phone" />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="model.email" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="model.remark" type="textarea" rows="3" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="状态" prop="status">
                <el-radio-group v-model="model.status">
                  <el-radio :label="1">开启</el-radio>
                  <el-radio :label="0">关闭</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>

      <template #footer>
        <el-space>
          <el-button type="default" @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleConfirm">确定</el-button>
        </el-space>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import AvatarUpload from "@/components/avatar-upload/index.vue";
import RoleSelect from "@/components/role-select/index.vue";

import { addUser, updateUser } from "@/api/system";

export default {
  name: "OpDialog",

  components: {
    AvatarUpload,
    RoleSelect,
  },

  emits: ["success"],

  data() {
    return {
      title: "新增",
      visible: false,

      id: null, // 当前Id

      model: {
        name: "",
        nickName: "",
        username: "",
        password: "",
        status: 1, // 状态，0 - 关闭 1 - 开启
        roleIdList: [],
        phone: "",
        email: "",
        remark: "",
        headImg: "",
      },
    };
  },

  computed: {
    rules() {
      const rules = {
        name: [{ required: true, message: "请输入" }],
        nickName: [{ required: true, message: "请输入" }],
        username: [{ required: true, message: "请输入" }],
        password: [{ required: true, message: "请输入" }],
        roleIdList: [{ required: true, message: "请输入" }],
      };

      if (this.id) {
        // 编辑
        delete rules.password;
      }

      return rules;
    },
  },

  methods: {
    open(row) {
      if (row) {
        // 编辑
        this.id = row.id;
        this.title = "编辑";
        this.visible = true;

        // 数据回填
        //    1. 获取 modelKeys
        const modelKeys = Object.keys(this.model);
        //    2. 基于 modelKeys 到 row 对象中取对应的 key 组成一个新的对象
        const obj = {};
        modelKeys.forEach((key) => {
          obj[key] = row[key];
        });
        //    3. 将 obj 的数据合并到 this.model 中
        this.$nextTick(() => {
          this.model = Object.assign({}, this.model, obj, {
            // row.roleIdList "2,1"
            // obj.roleIdList "2,1"
            // this.model.roleIdList 需要的是 [2, 1]
            // SO, 额外处理下这个字段
            roleIdList: obj.roleIdList.split(",").map((item) => parseInt(item)),
          });
        });
      } else {
        // 新增
        this.id = null;
        this.title = "新增";
        this.visible = true;

        // 数据重置
        this.$refs.formRef?.resetFields();
      }
    },

    handleCancel() {
      this.visible = false;
    },

    handleConfirm() {
      this.$refs.formRef.validate(async (flag) => {
        if (!flag) return;

        if (this.id) {
          // 编辑
          await updateUser({ ...this.model, id: this.id });
        } else {
          // 新增
          await addUser(this.model);
        }

        this.visible = false;

        this.$emit("success");
      });
    },
  },
};
</script>
